<%@page contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>各地区开发人员数量</title>
<%@ include file="/common/header/meta.jsp"%>
<%@ include file="/common/header/script.jsp"%>
<script type="text/javascript">
	var $dg;
	var currentYear = $.date.format(new Date(), "yyyy");
	var currentMonth = $.date.format(new Date(), "MM");
	
	var params = {"searchYear": currentYear} ;
	var year = [
	       { label: '2013', value: '2013' },{ label: '2014', value: '2014' },{ label: '2015', value: '2015' },
	       { label: '2016', value: '2016' },{ label: '2017', value: '2017' },{ label: '2018', value: '2018' },
	       { label: '2019', value: '2019' },{ label: '2020', value: '2020' },{ label: '2021', value: '2021' },
	];
	$(function() {
		$("#searchYear").combobox({
			valueField: 'label', textField: 'value', value: currentYear,
			data: year,
			panelHeight:'auto', editable:false, autoShowPanel: true,
			onSelect: function() {
				searchBox();
			}
		}) ;
		
		$("#submit_year").combobox({
			valueField: 'label', textField: 'value', value: currentYear,
			data: year,
			panelHeight:'auto', editable:false, autoShowPanel: true,
			onChange: function(newVal, oldVal) {
				$("#searchYear").combobox("setValue", newVal) ;
			}
		}) ;
		
		var selectM  ;
		switch(currentMonth) {
			case currentMonth=="01" : selectM="m1"; break;
			case currentMonth=="02" : selectM="m2"; break;
			case currentMonth=="03" : selectM="m3"; break;
			case currentMonth=="04" : selectM="m4"; break;
			case currentMonth=="05" : selectM="m5"; break;
			case currentMonth=="06" : selectM="m6"; break;
			case currentMonth=="07" : selectM="m7"; break;
			case currentMonth=="08" : selectM="m8"; break;
			case currentMonth=="09" : selectM="m9"; break;
			case currentMonth=="10" : selectM="m10"; break;
			case currentMonth=="11" : selectM="m11"; break;
			case currentMonth=="12" : selectM="m12"; break;
			default : selectM="m1";
		}
		$("#submit_month").combobox("setValue", selectM);
		
		$dg = $("#dg").datagrid({
			url: $.webapp.root+"/admin/oa/company_member_count/company_member_datagrid.do", 
			idField: 'id', fit: true, border: false, pageSize: 30, rownumbers: true, showFooter: true,
			remoteSort: true, toolbar: '#toolbars', striped:true, singleSelect: false,
			sortName: 'num', sortOrder: 'asc', queryParams: params,
			frozenColumns: [[
			    { field: 'id', title: 'person_id', hidden: true },
			    { field: 'category', title: '名称', width: 170, formatter: function(value, row, index) {
			    	if(undefined == value) {return "";}
			    	else {
			    		if(index<3){
			    			return "<span style='color:#236FD4;line-height:30px;'>"+value+"</span>";
			    		} else{
			    			return "<span style='color:red;line-height:30px;'>"+value+"</span>";
			    		}
			    	}
			    } }
			]],
			columns: [[
                {title:'年份（<span id="titleYear"></span>）',colspan:12},
           ],[ 
				{ field: 'm1', title: '一月', width: 60, align: 'center', formatter:function(value, row, index){
					if(undefined == value) return 0;
					return "<font class='jdl'>"+value+"</font>" ;
				} },
				{ field: 'm2', title: '二月', width: 60, align: 'center', formatter:function(value, row, index){
					if(undefined == value) return 0;
					return "<font class='jdl'>"+value+"</font>" ;
				} },
				{ field: 'm3', title: '三月', width: 60, align: 'center', formatter:function(value, row, index){
					if(undefined == value) return 0;
					return "<font class='jdl'>"+value+"</font>" ;
				} },
				{ field: 'm4', title: '四月', width: 60, align: 'center', formatter:function(value, row, index){
					if(undefined == value) return 0;
					return "<font class='jdl'>"+value+"</font>" ;
				} },
				{ field: 'm5', title: '五月', width: 60, align: 'center', formatter:function(value, row, index){
					if(undefined == value) return 0;
					return "<font class='jdl'>"+value+"</font>" ;
				} },
				{ field: 'm6', title: '六月', width: 60, align: 'center', formatter:function(value, row, index){
					if(undefined == value) return 0;
					return "<font class='jdl'>"+value+"</font>" ;
				} },
				{ field: 'm7', title: '七月', width: 60, align: 'center', formatter:function(value, row, index){
					if(undefined == value) return 0;
					return "<font class='jdl'>"+value+"</font>" ;
				} },
				{ field: 'm8', title: '八月', width: 60, align: 'center', formatter:function(value, row, index){
					if(undefined == value) return 0;
					return "<font class='jdl'>"+value+"</font>" ;
				} },
				{ field: 'm9', title: '九月', width: 60, align: 'center', formatter:function(value, row, index){
					if(undefined == value) return 0;
					return "<font class='jdl'>"+value+"</font>" ;
				} },
				{ field: 'm10', title: '十月', width: 60, align: 'center', formatter:function(value, row, index){
					if(undefined == value) return 0;
					return "<font class='jdl'>"+value+"</font>" ;
				} },
				{ field: 'm11', title: '十一月', width: 60, align: 'center', formatter:function(value, row, index){
					if(undefined == value) return 0;
					return "<font class='jdl'>"+value+"</font>" ;
				} },
				{ field: 'm12', title: '十二月', width: 60, align: 'center', formatter:function(value, row, index){
					if(undefined == value) return 0;
					return "<font class='jdl'>"+value+"</font>" ;
				} }
				
            ]],
			onLoadSuccess: function(node, data) {
				$.fn.datagrid.extensions.onLoadSuccess.apply(this, arguments);
				$dg.datagrid('unselectAll');$dg.datagrid('clearSelections');$dg.datagrid('unselectAll');
				
				var selectYear = $("#searchForm").form("getData").searchYear ;
				
				$("#titleYear").html(selectYear);
				
				if(selectYear<currentYear) {
					for(var i=1;i<=12;i++){
				        $($dg.datagrid('getColumnDom',"m"+i)).css("background","#ddd");
			        }
				} else {
					for(var i=1;i<=12;i++){
				        $($dg.datagrid('getColumnDom',"m"+i)).css("background","#ddd");
			        }
					for(var i=(new Date().getMonth()+1)+1;i<=12;i++){
				        $($dg.datagrid('getColumnDom',"m"+i)).css("background","#f0fff0");
			        }
					$($dg.datagrid('getColumnDom',"m"+(new Date().getMonth()+1))).css("background","#55BF3B");
				}
				
			}
		}) ;
	});
	
	function searchBox() {
		var search_form = $("#searchForm").form("getData") ;
		params["searchYear"] = search_form.searchYear ;
		$dg.datagrid("load",params);
	}
	function searchClear() {
		$("#searchForm").form("clear") ;
		$dg.datagrid("load",{});
	}
	
	function addOrUpdate() {
		
		if($('#submitForm').form('validate')) {
			$.easyui.loading({ msg: "数据提交中，请稍等..." });
			
			$.post($.webapp.root+"/admin/oa/company_member_count/addOrUpdate.do", $("#submitForm").form("getData"), function(result) {
				if (result.status) {
					var search_form = $("#submitForm").form("getData") ;
					params["searchYear"] = search_form.year ;
					params["personId"] = search_form.personId;
					
					$dg.datagrid("load",params);
					$.easyui.loaded(); 
					alertify.success(result.msg);
				} else {
					$.easyui.loaded();$.messager.alert("错误", result.msg, "error");
				}
			}, 'json').error(function(){$.easyui.loaded();});
		} 
		
	}
	
</script>
</head>

<body>
	<div id="dg">
		<div id="toolbars">
			<form id="submitForm">
            	<div class="s_box">
            		<div class="gr">
            			<div class="toolbar_bto">
	            			年份 <input id="submit_year" name="year" style="height:25px; width: 55px;"/>
	            			月份
	            			<select id="submit_month" name="month" class="easyui-combobox" data-options="panelHeight:'auto',editable:false,required: true" style="height:25px;">
								<option value="m1">一月</option> 
								<option value="m2">二月</option>
								<option value="m3">三月</option>
								<option value="m4">四月</option>
								<option value="m5">五月</option>
								<option value="m6">六月</option>
								<option value="m7">七月</option>
								<option value="m8">八月</option>
								<option value="m9">九月</option>
								<option value="m10">十月</option>
								<option value="m11">十一月</option>
								<option value="m12">十二月</option>
							</select>
            				<input name="guangzhou" class="easyui-validatebox" value="" type="text" data-options="required: true, prompt: '广州开发在职总人数'" style="width: 110px;" />
            				<input name="suzhou" class="easyui-validatebox" value="" type="text" data-options="required: true, prompt: '苏州开发在职总人数'" style="width: 110px;" />
            				<input name="beijin" class="easyui-validatebox" value="" type="text" data-options="required: true, prompt: '北京开发在职总人数'" style="width: 110px;" />
		            		<a onClick="addOrUpdate();" class="easyui-linkbutton" value="0" data-options="plain: true, iconCls: 'ext_save'">提交</a>
            			</div>
            		</div>
            	</div>
			</form>
			<form id="searchForm">
				<input type="hidden" name="personId" value=""/>
				<div id="search_bar">
					年份 <input id="searchYear" name="searchYear" style="height:25px; width: 55px;"/>
		            <a onclick="searchBox();" class="easyui-linkbutton" data-options="plain: true, iconCls: 'ext_reload'">查询</a>
	            </div>
           	</form>
        </div>
	</div>
</body>
</html>